.loading-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 100;
    display: none;
}
.cssload-container{
    position: absolute;
    width:90px;
    height: 22px;
    left: 50%;
    top: 50%;
    margin-left: -45px;
    margin-top: -11px;
}

.cssload-loading i{
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 50%;
    background: rgb(0,179,213);
}
.cssload-loading i:first-child{
    opacity: 0;
    animation:cssload-loading-ani2 0.5s linear infinite;
    -o-animation:cssload-loading-ani2 0.5s linear infinite;
    -ms-animation:cssload-loading-ani2 0.5s linear infinite;
    -webkit-animation:cssload-loading-ani2 0.5s linear infinite;
    -moz-animation:cssload-loading-ani2 0.5s linear infinite;
    transform:translate(-18px);
    -o-transform:translate(-18px);
    -ms-transform:translate(-18px);
    -webkit-transform:translate(-18px);
    -moz-transform:translate(-18px);
}
.cssload-loading i:nth-child(2),
.cssload-loading i:nth-child(3){
    animation:cssload-loading-ani3 0.5s linear infinite;
    -o-animation:cssload-loading-ani3 0.5s linear infinite;
    -ms-animation:cssload-loading-ani3 0.5s linear infinite;
    -webkit-animation:cssload-loading-ani3 0.5s linear infinite;
    -moz-animation:cssload-loading-ani3 0.5s linear infinite;
}
.cssload-loading i:last-child{
    animation:cssload-loading-ani1 0.5s linear infinite;
    -o-animation:cssload-loading-ani1 0.5s linear infinite;
    -ms-animation:cssload-loading-ani1 0.5s linear infinite;
    -webkit-animation:cssload-loading-ani1 0.5s linear infinite;
    -moz-animation:cssload-loading-ani1 0.5s linear infinite;
}




@keyframes cssload-loading-ani1{
    100%{
        transform:translate(36px);
        opacity: 0;
    }
}

@-o-keyframes cssload-loading-ani1{
    100%{
        -o-transform:translate(36px);
        opacity: 0;
    }
}

@-ms-keyframes cssload-loading-ani1{
    100%{
        -ms-transform:translate(36px);
        opacity: 0;
    }
}

@-webkit-keyframes cssload-loading-ani1{
    100%{
        -webkit-transform:translate(36px);
        opacity: 0;
    }
}

@-moz-keyframes cssload-loading-ani1{
    100%{
        -moz-transform:translate(36px);
        opacity: 0;
    }
}

@keyframes cssload-loading-ani2{
    100%{
        transform:translate(18px);
        opacity: 1;
    }
}

@-o-keyframes cssload-loading-ani2{
    100%{
        -o-transform:translate(18px);
        opacity: 1;
    }
}

@-ms-keyframes cssload-loading-ani2{
    100%{
        -ms-transform:translate(18px);
        opacity: 1;
    }
}

@-webkit-keyframes cssload-loading-ani2{
    100%{
        -webkit-transform:translate(18px);
        opacity: 1;
    }
}

@-moz-keyframes cssload-loading-ani2{
    100%{
        -moz-transform:translate(18px);
        opacity: 1;
    }
}

@keyframes cssload-loading-ani3{
    100%{
        transform:translate(18px);
    }
}

@-o-keyframes cssload-loading-ani3{
    100%{
        -o-transform:translate(18px);
    }
}

@-ms-keyframes cssload-loading-ani3{
    100%{
        -ms-transform:translate(18px);
    }
}

@-webkit-keyframes cssload-loading-ani3{
    100%{
        -webkit-transform:translate(18px);
    }
}

@-moz-keyframes cssload-loading-ani3{
    100%{
        -moz-transform:translate(18px);
    }
}